<template>
  <div class="carousel_container">
    <div class="swiper-container category-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="row">
            <div class="item"><span class="iconfont icon-xican"></span><span class="name">美食</span></div>
            <div class="item"><span class="iconfont icon-shangdian"></span><span class="name">卖场便利</span></div>
            <div class="item"><span class="iconfont icon-lizhi"></span><span class="name">水果</span></div>
            <div class="item"><span class="iconfont icon-paotuidaigou"></span><span class="name">跑腿代购</span></div>
            <div class="item"><span class="iconfont icon-yinliao"></span><span class="name">甜品饮品</span></div>
          </div>
          <div class="row">
            <div class="item"><span class="iconfont icon-wuxing"></span><span class="name">星选好店</span></div>
            <div class="item"><span class="iconfont icon-APPtubiao-"></span><span class="name">送药上门</span></div>
            <div class="item"><span class="iconfont icon-wucan"></span><span class="name">大牌惠吃</span></div>
            <div class="item"><span class="iconfont icon-peisong"></span><span class="name">蜂鸟配送</span></div>
            <div class="item"><span class="iconfont icon-qiandao4-copy"></span><span class="name">签到领红包</span></div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="row">
            <div class="item"><span class="iconfont icon-wucan1"></span><span class="name">午餐</span></div>
            <div class="item"><span class="iconfont icon-kuaican"></span><span class="name">素食简餐</span></div>
            <div class="item"><span class="iconfont icon-hanbao"></span><span class="name">汉堡披萨</span></div>
            <div class="item"><span class="iconfont icon-mianguan"></span><span class="name">米粉面馆</span></div>
            <div class="item "><span class="iconfont icon-baozi"></span><span class="name">包子粥店</span></div>
          </div>
          <div class="row">
            <div class="item"><span class="iconfont icon-mbefengge_zhaji"></span><span class="name">炸鸡炸串</span></div>
            <div class="item"><span class="iconfont icon-shucaiqu"></span><span class="name">厨房生鲜</span></div>
            <div class="item"><span class="iconfont icon-xianhua-"></span><span class="name">鲜花绿植</span></div>
            <div class="item"><span class="iconfont icon-shangcheng_yaboluwei"></span><span class="name">鸭脖卤味</span></div>
            <div class="item"><span class="iconfont icon-shengxian"></span><span class="name">烧烤海鲜</span></div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination category-pagination"></div>
    </div>

  </div>
</template>

<script>
  import Swiper from 'swiper'

  export default {
    mounted() {
      new Swiper('.category-container', {
        pagination: {
          el: '.category-pagination',
          clickable: true
        },
      })
    },
  }
</script>

<style scoped lang="scss">
  .category-container{
    padding-bottom: 10px;

    .row{
      font-size: 0;

      .item{
        text-align: center;
        font-size: 1rem;
        width: 20%;
        padding: 10px 0;
        display: inline-block;

        .iconfont{
          padding: 5px 0;
          font-weight: bold;
          display: inline-block;
          width: 100%;
          font-size: 2rem;
        }
      }
    }
  }
</style>
